<template>
  <div id="task">
    <group class="task_box">
      <div class="task_title">
        <h3>{{childtask.task_desc}}</h3>
      </div>
      <div class="timeTask">
        <div class="taskSon_box">
          <div class="taskSon"> 
            <div class="taskSon_hd">
              <div class="imgbox">
                <img :src="childtask.imgUrl" alt="头像">           
              </div>
              <p class="omit"><span class="red">{{childtask.reward_goal}}</span>张房卡</p>
            </div>
            <div class="taskSon_bd">
              <h3>{{childtask.reward_desc}}</h3>
              <p>{{childtask.task_notes}}</p>
              <div class="progress_box">
                <x-progress :percent="parseInt(childtask.schedule)" :show-cancel="false" class="progress"></x-progress>
                <span>{{childtask.schedule}}</span>
              </div>
            </div>
          </div>
          <button v-if="parseInt(childtask.schedule)==100 && timeTask.reward_status == '0'" class="taskbtn" @click="getPrize">领奖</button>
          <button v-else-if="childtask.reward_status == '1'" class="taskbtn">已领取</button>
          <button v-else class="taskbtn">继续努力</button>
        </div>
      </div>
    </group>
    <modal-box ref="modal"></modal-box>
  </div>
</template>

<script>
import { Group, XProgress, XTable } from "vux";
import modalBox from "../../../components/common/modalBox";
import { timestamp_switch_time } from "../../../scripts/utils";
export default {
  data() {
    return {
      typeid: "", //任务类型
      taskid: "", //任务id
      configid: "", //子任务id
      childtask: {}//任务
    };
  },
  created() {
    this.typeid = this.$route.query.typeid;
    this.taskid = this.$route.query.taskid;
    this.configid = this.$route.query.configid;
    this.getChildTask(this.typeid, this.taskid, this.configid);
  },
  components: {
    modalBox,
    Group,
    XTable,
    XProgress
  },
  methods: {
    getChildTask(typeid, taskid, configid) {
      this.apiService.Task.childtask({
        typeid: typeid,
        taskid: taskid,
        configid: configid
      }).then(res => {
        this.childtask = res.data;
        this.childtask.imgUrl = res.data.image
      });
    },
    getPrize() {
      this.apiService.Task.getnontimedtaskreward({
        taskid: this.taskid,
        configid: this.configid
      }).then(res => {
        this.$vux.alert.show({
          title: this.COMPANY_GAME_NAME,
          content: `恭喜你成功领取房卡${res.data.reward_number}张`,
          hideOnBlur: true
        });
        this.getChildTask(this.typeid, this.taskid, this.configid);
      });
    }
  }
};
</script>
<style scoped>
#task {
  height: 100%;
}
.red {
  color: rgb(247, 93, 93);
}
.task_title {
  padding: 0.25rem 0.2rem;
  overflow: hidden;
  position: relative;
}
.task_title h3,
.task_title p {
  font-size: 0.3rem;
  float: left;
}
.task_title h3 {
  width: 70%;
}
.task_title p {
  text-align: right;
  width: 30%;
}
.task_title::after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  color: #d9d9d9;
  bottom: 0;
  border-bottom: 1px solid #d9d9d9;
  transform-origin: 0 100%;
  transform: scaleY(0.5);
}
.task,
.taskSon {
  padding: 2.5%;
  overflow: hidden;
  position: relative;
}
.taskWait {
  font-size: 0.35rem;
  padding: 2.5%;
  text-align: center;
  color: rgb(0, 133, 231);
}
.tasklist {
  width: 20%;
  float: left;
  height: 20%;
  margin: 2.5%;
  text-align: center;
}
.tasklist .imgbox,
.taskSon_hd .imgbox {
  height: 1.1rem;
  width: 1.1rem;
  border-radius: 6px;
  margin: 0 auto;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.tasklist .imgbox img,
.taskSon_hd .imgbox img {
  max-width: 80%;
  max-height: 80%;
}
.tasklist .imgbox .taskSign {
  position: absolute;
}
.tasklist p,
.taskSon_hd p {
  font-size: 0.2rem;
  margin-top: 0.1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/*限时任务*/
.taskSon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.taskSon .taskSon_hd,
.taskSon .taskSon_bd {
  float: left;
  text-align: center;
}
.taskSon .taskSon_hd {
  width: 35%;
}
.taskSon .taskSon_bd {
  width: 65%;
}
.taskSon .taskSon_bd h3 {
  font-size: 0.35rem;
  padding: 0.15rem;
}
.taskSon .taskSon_bd p {
  font-size: 0.25rem;
  padding: 0.15rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.taskSon .clocker,
.taskSon .progress_box {
  padding: 0.2rem;
  overflow: hidden;
}
.progress_box {
  display: flex;
}
.progress_box .progress {
  float: left;
  width: 75%;
}
.progress_box span {
  font-size: 0.3rem;
  margin-left: 0.2rem;
  float: left;
}
.taskbtn {
  width: 100%;
  line-height: 0.8rem;
  font-size: 0.3rem;
  color: rgb(0, 133, 231);
  background-color: #f5f5f5;
}
</style>
<style>
#task .task_box .weui-cells {
  margin: 0;
}
#task .progress .weui-progress__bar,
#task .weui-progress__inner-bar {
  height: 0.3rem;
  border-radius: 0.3rem;
}
</style>

